<template>
    <el-drawer v-model="isDrawerVisible" title="用户详情" :with-header="true">
        <el-descriptions direction="vertical" :column="1" size="large" border>
            <el-descriptions-item label="用户编号">{{shop.id}}</el-descriptions-item>
            <el-descriptions-item label="用户ID">{{shop.userId}}</el-descriptions-item>
            <el-descriptions-item label="店铺名">{{shop.shopName}}</el-descriptions-item>
            <el-descriptions-item label="logo">{{shop.logo}}</el-descriptions-item>
            <el-descriptions-item label="店铺描述">{{shop.shopDesc}}</el-descriptions-item>
            <el-descriptions-item label="状态">{{shop.status}}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{shop.createTime}}</el-descriptions-item>


        </el-descriptions>
    </el-drawer>
</template>

<script setup lang="ts">

// 控制抽屉的显示
import {ref} from "vue";

const isDrawerVisible = ref(false);

const shop = ref(
    {
        id: "",
        userId: "",
        shopName: "",
        logo: "",
        shopDesc: "",
        status: "",
        createTime: "",

    }
);

// 接收父组件传递过来的 用户 数据
const handleDetailData = (obj) => {
    isDrawerVisible.value = true;
    shop.value = obj;
}

// 将 handleDetailData 暴露给父组件
defineExpose({
    handleDetailData
})
</script>

<style scoped>

</style>